<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">
                    id:
                    <input type="text" class='form-control' v-model="id">
                </label>
                <label for="">
                    name:
                    <input type="text" class="form-control" v-model="name" @keyup.113='add'>
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
                <label for="">
                    搜索名称关键字:
                    <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'blue'">
                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>time</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 我们定义了一个search方法，同时把所有的关键字，通过传参的形式，传递给了search方法 -->
                <!-- 在search方法内部，通过执行for 循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time | dateFormat1()}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <p v-fontweight="900" v-fontsize="'30'">4444444444444444444</p>
    </div>
    <script>
        // 全局的过滤器，进行时间的格式化
        //所谓的全局过滤器就是所有的vm实例都可以访问
        Vue.filter('dateFormat', function (dataStr, pattern = '') {
            // 根据给定的时间字符串，得到特定的时间
            var dt = new Date(dataStr)

            //yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()

            // return y + '-' + m +'-'+ d


            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`

            } else {
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })

        //自定义全局案件修饰符
        Vue.config.keyCodes.f2 = 113

        //使用Vue.directive() 定义全局自定义指令
        //其中参数1：指令的名称（不加v-,调用的时候才加v-）
        // 参数2：是一个对象，身上有一些指令相关的函数
        Vue.directive('focus', {
            bind: function (el) {
                //注意：在每个函数中第一个参数，永远是el,表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
                //在元素 刚绑定了指令的时候，还没有插入到 DOM 中去，这时候，调用focus 方法没有作用
                //因为，一个元素，只有插入DOM之后，才能获取焦点
                // el.focus()
            },
            inserted: function (el) {//inserted 表示元素 插入到DOM中的时候会执行inserted函数【触发1次】
                el.focus()
                //和JS有关的操作，最好在inserted中去执行，防止JS行为不生效
            },
            updated: function () {//当VNode更新的时候，会执行updated,可能会出发多次

            }
        })
        Vue.directive('color', {
            //样式只要通过指令绑定给了元素，不管这个元素有没有插入到页面中去，这个元素肯定有了一个内联样式，将来元素肯定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
            bind: function (el, binding) {
                // el.style.color='red'
                //和样式相关的操作，一般都可以在bind中执行

                // console.log(binding.value)
                // console.log(binding.expression)
                el.style.color = binding.value
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    { id: 1, name: '奔驰', time: new Date() },
                    { id: 2, name: '宝马', time: new Date() },
                ]
            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name, time: new Date() })
                    this.id = ''
                    this.name = ''
                },
                del(id) {
                    //1. 如何根据id找到要删除对象的索引
                    // 2.找到索引，直接调用数组的splice方法
                    // this.list.some((item,i)=>{
                    //     if(item.id==id){
                    //         this.list.splice(i,1)//从i的位置删除一个
                    //         //在数组的some方法中如果return true，就会立即终止这个数组的后续循环
                    //         return true;
                    //     }
                    // })


                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    })
                    this.list.splice(index, 1)
                },
                search(keywords) {//根据关键字，进行数据的搜索
                    /* var newList = []
                     this.list.forEach(item => {
                         if (item.name.indexOf(keywords) != -1) {
                             newList.push(item)
                         }
                     })
                     return newList*/


                    // 注意： forEach some filter findIndex 都是数组的新方法
                    //都会对数组中的每一向进行遍历，执行相关的操作
                    return newList = this.list.filter(item => {
                        // if(item.name.indexOf(keywords)!=-1)

                        // ES6中为字符串提供了一个新的方法，叫做 String.prototype.includes('要包含的字符串')
                        // 如果包含返回ture,不包含返回false
                        if (item.name.includes(keywords)) {
                            return item
                        }
                    })

                }
            },

            //定义一个私有的，局部过滤器
            filters: {//过滤器有两个条件 【过滤名称， 处理函数】
                //过滤器调用的时候采用就近原则
                dateFormat1: function (dataStr, pattern = ' ') {
                    var dt = new Date(dataStr)
                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0')//ES6字符串新增的方法padStart(填充几位，要填充的元素)
                    var d = dt.getDate().toString().padStart(2, '0')
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0')
                        var mm = dt.getMinutes().toString().padStart(2, '0')
                        var ss = dt.getSeconds().toString().padStart(2, '0')
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }
                }
            },

            //自定义私有指令
            directives: {
                fontweight: {
                    bind: function (el, binding) {
                        el.style.fontWeight = binding.value
                    }
                },
                
                fontsize: function (el, binding) {//注意：这个function等同于把代码写到bind,update中去
                    el.style.fontSize = parseInt(binding.value) + 'px'

                }
            }
        });
        // 过滤器的定义方法
        // Vue.filter('过滤器的名称',function(){})

        //过滤器中的function，第一个参数已经规定死了，永远都是 过滤器 管道符前面传递过来的数据
        Vue.filter('过滤器的名称', function (data) {
            return data + '123'
        })

        //原生获取dom节点焦点
        // document.getElementById('search').focus()

    </script>
</body>

</html>
<!-- 过滤器调用的时候的格式   {{name | 过滤器的名称}} -->